<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>海健身</title>
	<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/flexible.css">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/flexible.js"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/vue/MD5.js"></script>
	<style>
		header{
			width:3.75rem;
			height:0.67rem;
			line-height: .67rem;
			background:rgba(38,38,46,1);
			overflow: hidden;
		}
		header img{
			height: .42rem;
			width: .42rem;
			border-radius: 50%;
			vertical-align: middle;
		
		}
		.touClass{
			float: left;
			margin-left: .21rem;
		}
		.touClass span{
			font-size: .15rem;
			color:#fff;
			display: inline-block;
			vertical-align: middle;
		}
		.headerRight{
			margin-right: .18rem;
			float: right;
			width:1.01rem;
			height:0.3rem;
			line-height: 0.3rem;
			background:rgba(249,206,14,1);
			border-radius:2px;
			text-align: center;
			font-size:0.15rem;
			color:rgba(51,55,82,1);
			margin-top:0.19rem;
		}
		.headerRight a{
			font-size:0.15rem;
			color:rgba(51,55,82,1);
		}
		.main{
			background: url("images/back.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
		.dowButton{
			width:3.36rem;
			height:0.46rem;
			line-height: 0.46rem;
			background:rgba(249,206,14,1);
			border-radius:6px;
			font-size:.15rem;
			color:rgba(34,34,34,1);
			text-align: center;
			position: absolute;
			bottom: 0.74rem;
			left: 0.2rem;
		}
		.dowButton a{
			font-size:.15rem;
			color:rgba(34,34,34,1);
		}
		.tp{
			text-align: center;
		}
		.tp img{
			margin-top: 1.38rem;
			height: 1.1rem;
			width: 1.1rem;
			border-radius: 50%;
		}
		.ts{
			height:.2rem;
			font-size:.22rem;
			color:rgba(255,255,255,1);
			line-height:.18rem;
			text-align: center;
			margin-top: .29rem;
		}
		.ts1{
			text-align: center;
			height:.18rem;
			font-size:.14rem;
			color:rgba(159,159,159,1);
			margin-top: .2rem;
		}
		.ts2{
			text-align: center;
			height:.18rem;
			font-size:.14rem;
			color:rgba(159,159,159,1);
			margin-top: .1rem;
		}
		a{
			text-decoration:none;
		}
	</style>
</head>
<body>
<div id="app">
<div class="main">
	<template>
		<header>
			<div class="touClass">
				<img :src="datas.headImg"/>
				<span>{{datas.userName}}</span>
			</div>
			<div class="headerRight" @click="dkApp">
				<a class="open-app">打开海健身</a>
			</div>
		</header>
		<div class="container">
			<div class="tp">
				<img :src="datas.headImg"/>
			</div>
			<div class="ts">
				{{datas.live.streamName}}
			</div>
			<div class="ts1">
				正在直播教学中
			</div>
			<div class="ts2">
				快来和我一起学习吧
			</div>
			<div class="dowButton" @click="dowxZ">
				<a>下载海健身APP</a>
			</div>
		</div>
	</template>
</div>
</div>
</body>
<script type="text/javascript">
	// $('.dowButton').click(function() {
	// 	var u = navigator.userAgent;
	// 	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
	// 	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	// 	//这个是安卓操作系统
	// 	if (isAndroid) {
	// 		//安卓app
	// 		window.location.href ="https://a.app.qq.com/o/simple.jsp?pkgname=com.lc.fitnesscircle";
	// 	}
	// 	//这个是ios操作系统
	// 	if (isIOS) {
	// 		//ios的scheme协议
	// 		window.location.href ="https://apps.apple.com/cn/app/id1483008559";
	// 	}
	// });
</script>
<script>
var app = new Vue({
	el: '#app',
	data: {
		liveId:'',
		datas:''
	},
	created(){
		this.setCanS()
	},
	methods: {
			//设置参数
			setCanS(){
				let Request = new Object()
				Request = GetRequest()
				this.liveId = Request['liveId']
				//获取场馆名称
				this.getList()
			},
			getList(){
				const params={
					liveId:this.liveId
				}
				axios.get('/api/live/getLive',{params:params}).then(data => {
					console.log(data)
					let { msg, code} = data
						if (code !=0) {
							this.datas=data.data.result
						}
					}).catch(function (error) { 
						console.log(error); 
				})
			},
			dkApp(){
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				// //这个是安卓操作系统
				if (isAndroid) {
					//安卓app的scheme协议
					// var appDetect = document.createElement('iframe');
					// appDetect.id = 'app-detect';
					// appDetect.style = 'display: none';
					// appDetect.src = "xl://fitnesscircle:9367/startlive?zbid="+this.liveId;
					// // 插入文档流，尝试打开APP
					// document.body.appendChild(appDetect);
					// // 移除探测器
					// appDetect.remove();
					 window.location.href = "xl://fitnesscircle:9367/startlive?zbid="+this.liveId;
					setTimeout(function(){
						let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
						if(typeof hidden =="undefined" || hidden ==false){
							//应用宝下载地址
							window.location.href ="https://a.app.qq.com/o/simple.jsp?pkgname=com.lc.fitnesscircle";
						}
					}, 2500);
				}
				//这个是ios操作系统
				if (isIOS) {
					//ios的scheme协议
					window.location.href = 'jsqbackstage.longcaisport.com://';
					setTimeout(function(){
						let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
						if(typeof hidden =="undefined" || hidden ==false){
							//App store下载地址
							window.location.href ="https://apps.apple.com/cn/app/id1483008559";
						}
					}, 2500);
					return false;
				}
			},
			dowxZ(){
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				//这个是安卓操作系统
				if (isAndroid) {
					//安卓app
					window.location.href ="https://a.app.qq.com/o/simple.jsp?pkgname=com.lc.fitnesscircle";
				}
				//这个是ios操作系统
				if (isIOS) {
					//ios的scheme协议
					window.location.href ="https://apps.apple.com/cn/app/id1483008559";
				}
			}
		}  
})
</script>
</html>